<template>
  <div class="tagList">
    <div class="top">
      <span>{{title}}</span>
      <van-icon v-show="title=='最近搜索'" name="delete-o" @click="removeHistrySearch"/>
    </div>
    <div class="content">
      <van-tag type="primary" v-for="(item,index) in tagList" :key="index" @click="search(item)">{{item}}</van-tag>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    tagList:{
      type:Array,
      default:()=>['暂无数据']
    },
    title:{
      type:String,
      default:'热门搜索'
    }
  },
  methods:{
    removeHistrySearch(){
      this.$dialog.confirm({
        title:'提示',
        message:'确认删除历史记录吗'
      }).then(()=>{
        localStorage.removeItem('historySearchList')
        this.$toast.success('已删除')
      }).catch(()=>{
        this.$toast.fail('已取消')
      })
      this.$parent.historySearchList = []
    },
    search(item){
      this.$parent.keyword = item
      this.$parent.onSearch()
    }
  }
}
</script>

<style scoped>
  .tagList{
    padding:20px;
  }
.top{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
}
.content{
  display: flex;
  flex-wrap: wrap;
}
.van-tag{
  font-size: 14px;
  padding:6px;
  margin-right:5px;
  margin-bottom: 5px;
}
</style>